<template>
    <div class="playlist">
        <h3>官方歌单</h3>

        <div class="wrapper" ref="wrapper">
         <ul class="content" ref="content">
            <li v-for="item in songlistData" :key="item.content_id">
             <div class="cover">
                 <img :src="item.cover" alt="">
                 <span>{{(item.listen_num/10000)|numFilter(1)}}万</span>
             </div>
              <span>{{item.title}}</span>
            </li>
        </ul>
        </div>
    </div>
</template>
<script>
import axios from 'axios'
import BScroll from 'better-scroll'
export default {
    data() {
    return {
      songlistData:[]
    };
  },
  // created(){
  //   this.getBanner()//针对异步，否则无法正常获取dom结点
  // },
  methods:{
    getSonglist(){//名字可以随便取
    //axios.get("").then().catch()安装插件axios spnnier
      axios.get("/api/recommend/playlist/u")
      .then(res => {
        console.log(res.data.data.list)//第一个data取数据，第二个data是API的返回值
        this.songlistData=res.data.data.list;
         this.betterScrollHorizontal(this.songlistData.length,160)
      })
      .catch(err => {
        console.error(err); 

      })
    },
    betterScrollHorizontal(num,itemWidth){
      let width =num * itemWidth;
      this.$refs.content.style.width = width + "px";
       this.$nextTick(() => {
          this.scroll = new BScroll(this.$refs.wrapper, {
            scrollX:true,
            startY:false,
            startX:0,
            click:true
          })
        })
    }
  },
  mounted(){
    this.getSonglist()//不需要管同步异步
  },
  filters:{
    numFilter(value,num){
     return parseFloat(value).toFixed(num);
    }
  }
}
</script>
<style scoped>
.playlist{
  width: 90%;
  margin: 0 auto;
}
.playlist>h3{
  text-align: left;
}
.wrapper{
  overflow: hidden;
}
ul.content>li{
  display: inline-block;
  width: 160px;
  vertical-align: top;
}
ul.content>li img{
  width: 90%;
  border-radius: 5px;

}
.cover{
  position: relative;
}
.cover>span{
  background-color: rgb(243, 243, 243);
  position: absolute;
  right: 10px;
  bottom: 5px;
  border-radius: 20px;
  width: 100px;
}
ul.content>li>span{
  font-size: 12px;
  display: inline-block;
  width: 90%;
}
</style>